<script lang="ts" setup>
import { ref } from "vue";
import Echart from "@/components/Echart.vue";
import * as echarts from "echarts";
const data = [220, 182, 191, 234, 290, 330];
const sideData = data.map((item) => item + 4.5);
const option: any = ref({});
option.value = {
  tooltip: {
    trigger: "axis",
    formatter: "{b} : {c}",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    left: "0%",
    right: "0%",
    bottom: "0%",
    top: "10%",
    containLabel: true,
  },
  legend: {
    data: ["本年", "同比%"],
    show: true,
    textStyle: {
      color: "#fff",
    },
    icon: "circle",
    right:0,
    top:0,
  },
  xAxis: {
    data: ["2020年", "2021年", "2022年", "2023年", "2024年", "2025年"],
    //坐标轴
    axisLine: {
      lineStyle: {
        color: "#3eb2e8",
      },
    },
    //坐标值标注
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
  },
  yAxis: {
    //坐标轴
    axisLine: {
      show: false,
    },
    //坐标值标注
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
    //分格线
    splitLine: {
      lineStyle: {
        color: "#1b222f",
      },
    },
  },
  series: [
    {
      name: "本年",
      tooltip: {
        show: true,
      },
      type: "bar",
      barWidth: 10,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#FFFFFF00", // 0% 处的颜色
              },
              {
                offset: 0.6,
                color: "#138CEB", // 60% 处的颜色
              },
              {
                offset: 1,
                color: "#17AAFE", // 100% 处的颜色
              },
            ],
            false
          ),
        },
      },
      data: data,
      barGap: 0,
    },
    {
      name:'本年',
      type: "bar",
      barWidth: 2,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#09337C00", // 0% 处的颜色
              },
              {
                offset: 0.6,
                color: "#0761C0", // 60% 处的颜色
              },
              {
                offset: 1,
                color: "#0575DE", // 100% 处的颜色
              },
            ],
            false
          ),
        },
      },
      barGap: 0,
      data: sideData,
    },
    // {
    //   name: "本年",
    //   tooltip: {
    //     show: false,
    //   },
    //   type: "pictorialBar",
    //   itemStyle: {
    //     borderWidth: 1,
    //     borderColor: "#0571D5",
    //     color: "#1779E0",
    //   },
    //   symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
    //   symbolSize: ["30", "10"],
    //   symbolOffset: ["0", "-11"],
    //   //symbolRotate: -5,
    //   symbolPosition: "end",
    //   data: data,
    //   z: 3,
    // },
    {
      name: "同比%",
      data: [300, 200, 400, 220, 190, 330],
      type: "line",
      smooth: true,
      lineStyle: {
        width: 2,
        color: "#fffaa8",
      },
      areaStyle: { //区域填充样式
            normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "#fffaa8"


                    },
                    {
                        offset: 1,
                        color: "rgba(25,163,223, 0)"
                    }
                ], false),
                shadowColor: '#fffaa850', //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
        },
    },
  ],
};
</script>
<template>
  <Echart
    style="width: 100%; height: 100%;"
    :options="option"
  ></Echart>
</template>
<style scoped></style>
